<template>
  <div @touchmove.prevent class="globlLoding" v-if="lodingShow">
    <md-popup v-model="lodingShow" :mask-closable="false">
      <div class="md-example-popup md-example-popup-center">
        <!-- <img src="../assets/imgs/base/system-loading.gif"> -->
        <md-activity-indicator type="carousel" :size="20"></md-activity-indicator>
      </div>
    </md-popup>
  </div>
</template>
<script>
  import {
    Popup,
    ActivityIndicator
  } from 'mand-mobile'
  export default {
    name: 'global-loding',
    components: {
      [Popup.name]: Popup,
      [ActivityIndicator.name]: ActivityIndicator,
    },
    data() {
      return {}
    },
    computed: {
      lodingShow: {
        get: function () {
          return this.$store.getters.getLodingShow
        },
        set: function () {}
      }
    },
  }
</script>
<style lang="less" scoped>
  .globlLoding {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;

    img {
      margin: 0;
      padding: 0;
      display: block;
      width: 140px;
      opacity: 0.6;
    }
  }
</style>